<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { usePersonDetailsStore } from '../../store/person/personDetails'
import user from '../../api/user'
import utils from '../../utils/utils'
const personDetailsStore = usePersonDetailsStore()


const imgChange = (file: any) => {
    if (file.raw) {
        personDetailsStore.PersonalDetails.imgUrl = URL.createObjectURL(file.raw!)
        console.log(file.raw)
        personDetailsStore.imgRow=file.raw
        personDetailsStore.setImgIsSubmit(true)
        utils.showMessage('上传成功', 'success', 2000)
    }
    return false
}

onMounted(() => {
    user.getPersonalDetail().then(res => {
        personDetailsStore.setPersonalDetails(res.data.data)
        personDetailsStore.PersonalDetailsShow=JSON.parse(JSON.stringify(res.data.data)) 
    }).catch(err => {
        console.log(err)
        ElMessage.error('获取个人信息失败')
    }).finally(() => {
        personDetailsStore.changeLoading()
    })
})
</script>
<template>
    <el-card class="userDetailsLeft" style="max-width: 300px;width:320px">
        <template #header>
            <div class="card-header">
                <span>个人信息</span>
            </div>
        </template>
        <div class="card-body" v-loading="personDetailsStore.loading">
            <div class="avatar-container">
                <!--
                <el-avatar :size="100" src="https://empty" fit="cover">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617171png.png" />
                </el-avatar>-->
                <el-upload class="avatar-uploader" :show-file-list="false" :on-change="imgChange"
                    :before-upload="() => false">
                    <div class="avatar-content">
                        <img v-if="personDetailsStore.PersonalDetails.imgUrl"
                            :src="personDetailsStore.PersonalDetails.imgUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="avatar-upload-overlay">
                        <el-icon>
                            <Camera />
                        </el-icon>
                        <span>上传头像</span>
                    </div>
                </el-upload>
            </div>
            <div class="info-list">
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <User />
                        </el-icon> 用户名称：</span>
                    <span class="info-value">{{ personDetailsStore.PersonalDetailsShow.username }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <Iphone />
                        </el-icon> 手机号码：</span>
                    <span class="info-value">{{ personDetailsStore.PersonalDetailsShow.mobile }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <Message />
                        </el-icon> 用户邮箱：</span>
                    <span class="info-value">{{ personDetailsStore.PersonalDetailsShow.email }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <OfficeBuilding />
                        </el-icon> 所属部门：</span>
                    <span class="info-value">{{ personDetailsStore.PersonalDetailsShow.deptName }} / {{
                        personDetailsStore.PersonalDetailsShow.positionName }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <Avatar />
                        </el-icon> 所属角色：</span>
                    <span class="info-value">{{ personDetailsStore.PersonalDetailsShow.roleName }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label"><el-icon>
                            <Calendar />
                        </el-icon> 创建日期：</span>
                    <span class="info-value">{{ utils.formatDate(personDetailsStore.PersonalDetailsShow.createdAt ?? new
                        Date())
                    }}</span>
                </div>
            </div>
        </div>
    </el-card>
</template>
<style scoped>
.card-header {
    font-size: 16px;
    font-weight: bold;
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.avatar-container {
    margin-bottom: 20px;
}

.info-list {
    width: 100%;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
    white-space: nowrap;
}

.info-label .el-icon {
    margin-right: 5px;
}

.info-value {
    font-size: 14px;
    color: #303133;
    word-break: break-all;
    /* 防止长文本溢出 */
}

/* 上传头像样式 */
.avatar-uploader :deep(.el-upload) {
    border: 2px solid #eee;
    /* 添加边框 */
    border-radius: 50%;
    /* 设置为圆形 */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100px;
    /* 设置上传区域的宽高 */
    height: 100px;
    display: flex;
    /* 使用flex布局居中内容 */
    justify-content: center;
    align-items: center;
}

.avatar-uploader :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
}

.avatar-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-content .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片填充圆形区域 */
    display: block;
    transition: filter 0.3s ease;
    /* 添加滤镜过渡 */
}

.avatar-uploader :deep(.el-upload:hover) .avatar-content .avatar {
    filter: brightness(70%);
    /* 鼠标悬停时变暗 */
}


.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    /* 图标占满容器 */
    height: 100%;
    text-align: center;
    display: flex;
    /* 使用flex布局居中图标 */
    justify-content: center;
    align-items: center;
}

.avatar-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 半透明黑色背景 */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* 默认隐藏 */
    transition: opacity 0.3s ease;
    /* 过渡效果 */
    pointer-events: none;
    /* 允许点击穿透到下层 */
}

.avatar-uploader :deep(.el-upload:hover) .avatar-upload-overlay {
    opacity: 1;
    /* 鼠标悬停时显示 */
}

.avatar-upload-overlay .el-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.avatar-upload-overlay span {
    font-size: 12px;
}
</style>